<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="/bigjo/js/jquery.js"></script>
<title>Insert title here</title>
</head>
<style type="text/css">
	#arealikediv{
		position:relative;
		width: 100px;
		float: left;
	}
	#arealikenav li{
		list-style-type: none;
		margin-bottom: 5px;
	}
	
	#arealikeul{
		margin-left: -50px;
	}
	
	.ViewDiv{
		position:absolute;
		margin-left:60px;
		width:850px;
		float: left;
		
	}
	
</style>
<script type="text/javascript">
	/* 서울 클릭  */
	jQuery.noConflict();
	jQuery(".area1").click(function(){
		var idx = document.URL.indexOf("bigjo");
		var str = document.URL.substring(0,idx+5);	
		 jQuery.ajax({
			url : str+"/seoul.chart",
			success:function(data){
				jQuery(".ViewDiv").html(data);
			}
		});
	});
	
	/* 광주 클릭  */
	jQuery.noConflict();
	jQuery(".area2").click(function(){
		var idx = document.URL.indexOf("bigjo");
		var str = document.URL.substring(0,idx+5);
		jQuery.ajax({
			url : str+"/gwangju.chart",
			success:function(data){
				jQuery(".ViewDiv").html(data);
			}
		});
	});
	
	/* 대구 클릭 */
	jQuery.noConflict();
	jQuery(".area3").click(function(){
		var idx = document.URL.indexOf("bigjo");
		var str = document.URL.substring(0,idx+5);
		jQuery.ajax({
			url : str+"/degoo.chart",
			success:function(data){
				jQuery(".ViewDiv").html(data);
			}
		});
	});
	
	/* 대전 클릭 */
	jQuery.noConflict();
	jQuery(".area4").click(function(){
		var idx = document.URL.indexOf("bigjo");
		var str = document.URL.substring(0,idx+5);
		jQuery.ajax({
			url : str+"/dejun.chart",
			success:function(data){
				jQuery(".ViewDiv").html(data);
			}
		});
		
	});
	
	/* 울산 클릭 */
	jQuery.noConflict();
	jQuery(".area5").click(function(){
		var idx = document.URL.indexOf("bigjo");
		var str = document.URL.substring(0,idx+5);
		jQuery.ajax({
			url : str+"/woolsan.chart",
			success:function(data){
				jQuery(".ViewDiv").html(data);
			}
		});
	});
	
	/* 강원도 클릭 */
	jQuery.noConflict();
	jQuery(".area6").click(function(){
		var idx = document.URL.indexOf("bigjo");
		var str = document.URL.substring(0,idx+5);
		jQuery.ajax({
			url : str+"/gangwondo.chart",
			success:function(data){
				jQuery(".ViewDiv").html(data);
			}
		});
	});
	
	/* 경기도 클릭 */
	jQuery.noConflict();
	jQuery(".area7").click(function(){
		var idx = document.URL.indexOf("bigjo");
		var str = document.URL.substring(0,idx+5);
		jQuery.ajax({
			url : str+"/kunggi.chart",
			success:function(data){
				jQuery(".ViewDiv").html(data);
			}
		});
	});
	
	/* 경상도 클릭 */
	jQuery.noConflict();
	jQuery(".area8").click(function(){
		var idx = document.URL.indexOf("bigjo");
		var str = document.URL.substring(0,idx+5);
		jQuery.ajax({
			url : str+"/kungsang.chart",
			success:function(data){
				jQuery(".ViewDiv").html(data);
			}
		});
	});
	
	/* 전라도 클릭 */
	jQuery.noConflict();
	jQuery(".area9").click(function(){
		var idx = document.URL.indexOf("bigjo");
		var str = document.URL.substring(0,idx+5);
		jQuery.ajax({
			url : str+"/junrado.chart",
			success:function(data){
				jQuery(".ViewDiv").html(data);
			}
		});
	});
	
	/* 충청도 클릭 */
	jQuery.noConflict();
	jQuery(".area10").click(function(){
		var idx = document.URL.indexOf("bigjo");
		var str = document.URL.substring(0,idx+5);
		jQuery.ajax({
			url : str+"/choongchungdo.chart",
			success:function(data){
				jQuery(".ViewDiv").html(data);
			}
		});
	});
	
	/* 세종시 클릭 */
	jQuery.noConflict();
	jQuery(".area11").click(function(){
		var idx = document.URL.indexOf("bigjo");
		var str = document.URL.substring(0,idx+5);
		jQuery.ajax({
			url : str+"/sejong.chart",
			success:function(data){
				jQuery(".ViewDiv").html(data);
			}
		});
	});
	
	/* 제주도 클릭 */
	jQuery.noConflict();
	jQuery(".area12").click(function(){
		var idx = document.URL.indexOf("bigjo");
		var str = document.URL.substring(0,idx+5);
		jQuery.ajax({
			url : str+"/jejoo.chart",
			success:function(data){
				jQuery(".ViewDiv").html(data);
			}
		});
	});
	
	

</script>



<body>
	<div id="arealikediv">
			<nav id="arealikenav">
				<ul id="arealikeul">
					<li><a class="area1">서울</a></li>
					<li><a class="area2">광주</a></li>
					<li><a class="area3">대구</a></li>
					<li><a class="area4">대전</a></li>
					<li><a class="area5">울산</a></li>
					<li><a class="area6">강원도</a></li>
					<li><a class="area7">경기도</a></li>
					<li><a class="area8">경상도</a></li>
					<li><a class="area9">전라도</a></li>
					<li><a class="area10">충청도</a></li>
					<li><a class="area11">세종시</a></li>
					<li><a class="area12">제주도</a></li>
				</ul>
			</nav>
	</div>
	<div class="ViewDiv"></div>
</body>
</html>